<template>
  <div>
    <action-sheet
      v-model="isShow"
      title="选择标记组"
      cancel-text="取消"
      confirm-text="确认"
      @onConfirm="confirm"
      @onCancel="cancel"
    >
      <div class="tag-group">
        <div
          class="tag-wrapper"
          v-for="item in marks"
          :key="item.markId"
          :class="{ active: selectTag.includes(item.markId) }"
          @click="chooseTag(item)"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
    </action-sheet>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import ActionSheet from '@/components/ActionSheet';
import { useModelWrapper } from '@/utils/hooks';
export default {
  props: {
    modelValue: {
      type: Boolean,
      require: true,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ActionSheet
  },
  emits: ['update:modelValue', 'confirm'],
  setup(props, { emit }) {
    const store = useStore();
    const isShow = useModelWrapper(props, emit);
    const selectTag = ref([...props.data]);

    const marks = computed(() => store.state.marks);

    const confirm = () => {
      let result = marks.value.filter((item) => selectTag.value.includes(item.markId));
      emit('confirm', result);
    };

    const cancel = () => {
      selectTag.value = [];
    };

    const chooseTag = (item) => {
      let index = selectTag.value.findIndex((markId) => markId === item.markId);
      if (index !== -1) {
        selectTag.value.splice(index, 1);
      } else {
        selectTag.value.push(item.markId);
      }
    };

    return { isShow, confirm, selectTag, chooseTag, cancel, marks };
  }
};
</script>

<style lang="scss" scoped>
.tag-group {
  min-height: 400px;
  overflow-y: auto;
  padding: 16px 0 16px 16px;
  font-size: 0;
}

.tag-wrapper {
  display: inline-block;
  height: 52px;
  line-height: 52px;
  padding: 0 20px;
  border: 1px solid #27cdc5;
  font-size: 28px;
  color: #27cdc5;
  border-radius: 6px;
  margin-right: 16px;
  margin-bottom: 16px;
  &.active {
    background: #27cdc5;
    color: #fff;
  }
}
</style>